<template>
	<div>
		<el-container>
			<el-header>
				<h2>排班情况</h2>
			</el-header>
			<el-main>
				<el-row type="flex" :gutter="20" style="margin-bottom: 30px;">
					<el-col :span="8">
						<el-tag>科室</el-tag>
						<el-select @change="gaibian1" v-model="keshi">
							<el-option v-for=" item in keshis" :label="item.ksname"
								:value="item.ksname"></el-option>
						</el-select>
					</el-col>
					<el-col :span="8">
						<el-tag>科室医生</el-tag>
						<el-select style="width: 220px;" v-model="doc" >
							<el-option v-for=" item in docs" :label="item.ksdocname"
								:value="item.ksdocname"></el-option>
						</el-select>
					</el-col>
					<el-col :span="8">
						<el-tag>挂号类别</el-tag>
						<el-select style="width: 220px;" v-model="leibie">
							<el-option
							      v-for="item in leibies"
							      :label="item.label"
							      :value="item.value">
							    </el-option>
						</el-select>
					</el-col>
				</el-row>
				<el-row type="flex" :gutter="20">
					<el-col :span="8">
						<el-tag>午别</el-tag>
						<el-select v-model="wubie">
							<el-option
							      v-for="item in wubies"
							      :label="item.label"
							      :value="item.value">
							    </el-option>
						</el-select>
					</el-col>
					<el-col :span="8">
						<el-tag>开始日期</el-tag>
						<el-date-picker v-model="value1" align="right" type="date" placeholder="选择开始日期"
							:picker-options="pickerOptions">
						</el-date-picker>
					</el-col>
					<el-col :span="8">
						<el-tag>结束日期</el-tag>
						<el-date-picker v-model="value2" align="right" type="date" placeholder="选择结束日期"
							:picker-options="pickerOptions">
						</el-date-picker>
					</el-col>
				</el-row>
				<el-row type="flex">
					<el-col :span="24">
						<el-table :data="tabledata" style="width: auto;" height="500">
							<el-table-column fixed prop="pid" label="序号" width="300px">
							</el-table-column>
							<el-table-column fixed prop="pname" label="姓名" width="300px">
							</el-table-column>

						</el-table>
					</el-col>
				</el-row>
			</el-main>
		</el-container>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				//该函数主要用来给日期选择框加上快捷选项
				pickerOptions: {
					disabledDate(time) {
						return time.getTime() > Date.now();
					},
					shortcuts: [{
						text: '今天',
						onClick(picker) {
							picker.$emit('pick', new Date());
						}
					}, {
						text: '昨天',
						onClick(picker) {
							const date = new Date();
							date.setTime(date.getTime() - 3600 * 1000 * 24);
							picker.$emit('pick', date);
						}
					}, {
						text: '一周前',
						onClick(picker) {
							const date = new Date();
							date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
							picker.$emit('pick', date);
						}
					}]
				},
				tabledata:[],
				value1: '',
				value2: '',
				leibie: {},
				wubie: {},
				doc: {},
				keshi: {},
				leibies: 
				[
					{
					   value: '选项1',
					   label: '专家号'
					}, 
					{
					   value: '选项2',
					   label: '普通号'
					},
				],
				wubies: 
				[
					{
					   value: '选项1',
					   label: '上午'
				    }, 
				    {
					   value: '选项2',
					   label: '下午'
				    },
				],
				docs: [],
				keshis: [],
				
			};
		},
		mounted: function() {
			this.$axios.get('http://localhost:8080/keshis.json').then((result) => {
				this.keshis = result.data; //写法固定

			}).catch((err) => {
				console.log(err);
			}),
			this.$axios.get('http://localhost:8080/paiban.json').then((result) => {
				this.tabledata = result.data; //写法固定
			
			}).catch((err) => {
				console.log(err);
			})
		},
		methods:
		{
			gaibian1()
			{
				this.docs=[];
				let obj = {};
				obj = this.keshis.find((item) => {
									return item.ksname === this.keshi;
								});
		
				
				this.docs = obj.ksdocs;
			},
		}
	};
</script>

<style>
</style>
